﻿<h5 class="row-title"><i class="typcn typcn-th-small"></i>Simple Tables</h5>
<div class="row">
    <div class="col-xs-12 col-md-6">
        <div class="well with-header  with-footer">
            <div class="header bg-blue">
                Simple Table With Hover
            </div>
            <table class="table table-hover">
                <thead class="bordered-darkorange">
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            Name
                        </th>
                        <th>
                            Family
                        </th>
                        <th>
                            Username
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            Steve
                        </td>
                        <td>
                            Jobs
                        </td>
                        <td>
                            steve
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                        <td>
                            Bill
                        </td>
                        <td>
                            Gates
                        </td>
                        <td>
                            billy
                        </td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>
                            Mark
                        </td>
                        <td>
                            Zuckerberg
                        </td>
                        <td>
                            markz
                        </td>
                    </tr>
                    <tr>
                        <td>
                            4
                        </td>
                        <td>
                            Marissa
                        </td>
                        <td>
                            Mayer
                        </td>
                        <td>
                            marim
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="footer">
                <code>class="table table-hover"</code>
            </div>
        </div>

    </div>
    <div class="col-xs-12 col-md-6">
        <div class="well with-header  with-footer">
            <div class="header bg-darkorange">
                Condensed Table
            </div>
            <table class="table table-hover table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            Name
                        </th>
                        <th>
                            Family
                        </th>
                        <th>
                            Username
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            Steve
                        </td>
                        <td>
                            Jobs
                        </td>
                        <td>
                            steve
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                        <td>
                            Bill
                        </td>
                        <td>
                            Gates
                        </td>
                        <td>
                            billy
                        </td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>
                            Mark
                        </td>
                        <td>
                            Zuckerberg
                        </td>
                        <td>
                            markz
                        </td>
                    </tr>
                    <tr>
                        <td>
                            4
                        </td>
                        <td>
                            Marissa
                        </td>
                        <td>
                            Mayer
                        </td>
                        <td>
                            marim
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="footer">
                <code>class="table table-condensed"</code>
            </div>
        </div>
    </div>
</div>
<div class="horizontal-space"></div>
<div class="row">
    <div class="col-xs-12 col-md-6">
        <div class="well with-header with-footer">
            <div class="header bg-warning">
                Bordered Table
            </div>
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            Name
                        </th>
                        <th>
                            Family
                        </th>
                        <th>
                            Username
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            Steve
                        </td>
                        <td>
                            Jobs
                        </td>
                        <td>
                            steve
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                        <td>
                            Bill
                        </td>
                        <td>
                            Gates
                        </td>
                        <td>
                            billy
                        </td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>
                            Mark
                        </td>
                        <td>
                            Zuckerberg
                        </td>
                        <td>
                            markz
                        </td>
                    </tr>
                    <tr>
                        <td>
                            4
                        </td>
                        <td>
                            Marissa
                        </td>
                        <td>
                            Mayer
                        </td>
                        <td>
                            marim
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="footer">
                <code>class="table table-bordered"</code>
            </div>
        </div>

    </div>
    <div class="col-xs-12 col-md-6">
        <div class="well with-header with-footer">
            <div class="header bg-palegreen">
                Stripped Table
            </div>
            <table class="table table-hover table-striped table-bordered">
                <thead class="bordered-blueberry">
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            Name
                        </th>
                        <th>
                            Family
                        </th>
                        <th>
                            Username
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            Steve
                        </td>
                        <td>
                            Jobs
                        </td>
                        <td>
                            steve
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                        <td>
                            Bill
                        </td>
                        <td>
                            Gates
                        </td>
                        <td>
                            billy
                        </td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>
                            Mark
                        </td>
                        <td>
                            Zuckerberg
                        </td>
                        <td>
                            markz
                        </td>
                    </tr>
                    <tr>
                        <td>
                            4
                        </td>
                        <td>
                            Marissa
                        </td>
                        <td>
                            Mayer
                        </td>
                        <td>
                            marim
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="footer">
                <code>class="table table-striped"</code>
            </div>
        </div>
    </div>
</div>
<h5 class="row-title"><i class="typcn typcn-tag"></i>Contextual Tables</h5>
<div class="row">
    <div class="col-xs-12 col-md-6">
        <div class="well with-header with-footer">
            <div class="header bordered-yellow">
                Contextual Rows
            </div>
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            Class Name
                        </th>
                        <th>
                            Column
                        </th>
                        <th>
                            Column
                        </th>
                        <th>
                            Column
                        </th>
                    </tr>
                </thead>
                <tbody>

                    <tr class="active">
                        <td>
                            1
                        </td>
                        <td>
                            active
                        </td>
                        <td>
                            Column heading
                        </td>
                        <td>
                            Column heading
                        </td>
                        <td>
                            Column heading
                        </td>
                    </tr>

                    <tr class="success">
                        <td>
                            2
                        </td>
                        <td>
                            success
                        </td>
                        <td>
                            Column heading
                        </td>
                        <td>
                            Column heading
                        </td>
                        <td>
                            Column heading
                        </td>
                    </tr>

                    <tr class="warning">
                        <td>
                            3
                        </td>
                        <td>
                            warning
                        </td>
                        <td>
                            Column heading
                        </td>
                        <td>
                            Column heading
                        </td>
                        <td>
                            Column heading
                        </td>
                    </tr>

                    <tr class="danger">
                        <td>
                            4
                        </td>
                        <td>
                            danger
                        </td>
                        <td>
                            Column heading
                        </td>
                        <td>
                            Column heading
                        </td>
                        <td>
                            Column heading
                        </td>
                    </tr>

                </tbody>
            </table>

            <div class="footer">
                <code>< tr class="active/success/danger/warning" ></code>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6">
        <div class="well with-header with-footer">
            <div class="header bordered-sky">
                Contextual Columns
            </div>
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            Column
                        </th>
                        <th>
                            Column
                        </th>
                        <th>
                            Column
                        </th>
                        <th>
                            Column
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            1
                        </td>
                        <td>
                            active
                        </td>
                        <td>
                            success
                        </td>
                        <td>
                            warning
                        </td>
                        <td class="danger">
                            danger
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                        <td class="active">
                            active
                        </td>
                        <td>
                            success
                        </td>
                        <td>
                            warning
                        </td>
                        <td>
                            danger
                        </td>
                    </tr>
                    <tr>
                        <td>
                            3
                        </td>
                        <td>
                            active
                        </td>
                        <td>
                            success
                        </td>
                        <td class="warning">
                            warning
                        </td>
                        <td>
                            danger
                        </td>
                    </tr>
                    <tr>
                        <td>
                            4
                        </td>
                        <td>
                            active
                        </td>
                        <td class="success">
                            success
                        </td>
                        <td>
                            warning
                        </td>
                        <td>
                            danger
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="footer">
                <code>< td class="active/success/danger/warning" ></code>
            </div>
        </div>
    </div>
</div>
<h5 class="row-title"><i class="typcn typcn-arrow-minimise"></i>Responsive Tables</h5>
<div class="row">
    <div class="col-xs-12 col-md-6">
        <div class="well with-header with-footer">
            <div class="header bordered-pink">
                Responsive Table
            </div>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>
                            <i class="fa fa-briefcase"></i> Company
                        </th>
                        <th class="hidden-xs">
                            <i class="fa fa-user"></i> Contact
                        </th>
                        <th>
                            <i class="fa fa-shopping-cart"></i> Total
                        </th>
                        <th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <a href="#">RedBull</a>
                        </td>
                        <td class="hidden-xs">
                            Mike Nilson
                        </td>
                        <td>
                            2560.60$
                        </td>
                        <td>
                            <a href="#" class="btn btn-default btn-xs purple"><i class="fa fa-edit"></i> Edit</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Google</a>
                        </td>
                        <td class="hidden-xs">
                            Adam Larson
                        </td>
                        <td>
                            560.60$
                        </td>
                        <td>
                            <a href="#" class="btn btn-default btn-xs black"><i class="fa fa-trash-o"></i> Delete</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Apple</a>
                        </td>
                        <td class="hidden-xs">
                            Daniel Kim
                        </td>
                        <td>
                            3460.60$
                        </td>
                        <td>
                            <a href="#" class="btn btn-default btn-xs purple"><i class="fa fa-edit"></i> Edit</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Microsoft</a>
                        </td>
                        <td class="hidden-xs">
                            Nick
                        </td>
                        <td>
                            2560.60$
                        </td>
                        <td>
                            <a href="#" class="btn btn-default btn-xs blue"><i class="fa fa-share"></i> Share</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="footer">
                <code>< th class="hidden-xs" ></code>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-6">
        <div class="well with-header with-footer">
            <div class="header bordered-success">
                Scrollable Table
            </div>
            <div class="table-scrollable">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th scope="col" style="width:450px !important">
                                Column header 1
                            </th>
                            <th scope="col">
                                Column header 2
                            </th>
                            <th scope="col">
                                Column header 3
                            </th>
                            <th scope="col">
                                Column header 4
                            </th>
                            <th scope="col">
                                Column header 5
                            </th>
                            <th scope="col">
                                Column header 6
                            </th>
                            <th scope="col">
                                Column header 7
                            </th>
                            <th scope="col">
                                Column header 8
                            </th>
                            <th scope="col">
                                Column header 9
                            </th>
                            <th scope="col">
                                Column header 10
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                            <td>
                                Table data
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="footer">
                <code>< div class="table-scrollable" ></code>
            </div>
        </div>

    </div>
</div>
<div class="row">
    <div class="col-xs-12 col-md-12">
        <div class="widget">
            <div class="widget-header  with-footer">
                <span class="widget-caption">Responsive Flip Scroll Tables</span>
                <div class="widget-buttons">
                    <a href="" widget-maximize></a>
                    <a href="" widget-collapse></a>
                    <a href="" widget-dispose></a>
                </div>
            </div>
            <div class="widget-body">
                <div class="alert alert-info fade in alert-radius-bordered alert-shadowed">
                    <button class="close" data-dismiss="alert">
                        ×
                    </button>
                    <i class="fa-fw fa fa-info"></i>

                    <strong>Flip Scroll Table:</strong> Flips between horizontal and vertical scrolls according to page width
                </div>
                <div class="flip-scroll">
                    <table class="table table-bordered table-striped table-condensed flip-content">
                        <thead class="flip-content bordered-palegreen">
                            <tr>
                                <th>
                                    Code
                                </th>
                                <th>
                                    Company
                                </th>
                                <th class="numeric">
                                    Price
                                </th>
                                <th class="numeric">
                                    Change
                                </th>
                                <th class="numeric">
                                    Change %
                                </th>
                                <th class="numeric">
                                    Open
                                </th>
                                <th class="numeric">
                                    High
                                </th>
                                <th class="numeric">
                                    Low
                                </th>
                                <th class="numeric">
                                    Volume
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    AAC
                                </td>
                                <td>
                                    AUSTRALIAN AGRICULTURAL COMPANY LIMITED.
                                </td>
                                <td class="numeric">
                                    $1.38
                                </td>
                                <td class="numeric">
                                    -0.01
                                </td>
                                <td class="numeric">
                                    -0.36%
                                </td>
                                <td class="numeric">
                                    $1.39
                                </td>
                                <td class="numeric">
                                    $1.39
                                </td>
                                <td class="numeric">
                                    $1.38
                                </td>
                                <td class="numeric">
                                    9,395
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    AAD
                                </td>
                                <td>
                                    ARDENT LEISURE GROUP
                                </td>
                                <td class="numeric">
                                    $1.15
                                </td>
                                <td class="numeric">
                                    +0.02
                                </td>
                                <td class="numeric">
                                    1.32%
                                </td>
                                <td class="numeric">
                                    $1.14
                                </td>
                                <td class="numeric">
                                    $1.15
                                </td>
                                <td class="numeric">
                                    $1.13
                                </td>
                                <td class="numeric">
                                    56,431
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    AAX
                                </td>
                                <td>
                                    AUSENCO LIMITED
                                </td>
                                <td class="numeric">
                                    $4.00
                                </td>
                                <td class="numeric">
                                    -0.04
                                </td>
                                <td class="numeric">
                                    -0.99%
                                </td>
                                <td class="numeric">
                                    $4.01
                                </td>
                                <td class="numeric">
                                    $4.05
                                </td>
                                <td class="numeric">
                                    $4.00
                                </td>
                                <td class="numeric">
                                    90,641
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ABC
                                </td>
                                <td>
                                    ADELAIDE BRIGHTON LIMITED
                                </td>
                                <td class="numeric">
                                    $3.00
                                </td>
                                <td class="numeric">
                                    +0.06
                                </td>
                                <td class="numeric">
                                    2.04%
                                </td>
                                <td class="numeric">
                                    $2.98
                                </td>
                                <td class="numeric">
                                    $3.00
                                </td>
                                <td class="numeric">
                                    $2.96
                                </td>
                                <td class="numeric">
                                    862,518
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ABP
                                </td>
                                <td>
                                    ABACUS PROPERTY GROUP
                                </td>
                                <td class="numeric">
                                    $1.91
                                </td>
                                <td class="numeric">
                                    0.00
                                </td>
                                <td class="numeric">
                                    0.00%
                                </td>
                                <td class="numeric">
                                    $1.92
                                </td>
                                <td class="numeric">
                                    $1.93
                                </td>
                                <td class="numeric">
                                    $1.90
                                </td>
                                <td class="numeric">
                                    595,701
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ABY
                                </td>
                                <td>
                                    ADITYA BIRLA MINERALS LIMITED
                                </td>
                                <td class="numeric">
                                    $0.77
                                </td>
                                <td class="numeric">
                                    +0.02
                                </td>
                                <td class="numeric">
                                    2.00%
                                </td>
                                <td class="numeric">
                                    $0.76
                                </td>
                                <td class="numeric">
                                    $0.77
                                </td>
                                <td class="numeric">
                                    $0.76
                                </td>
                                <td class="numeric">
                                    54,567
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ACR
                                </td>
                                <td>
                                    ACRUX LIMITED
                                </td>
                                <td class="numeric">
                                    $3.71
                                </td>
                                <td class="numeric">
                                    +0.01
                                </td>
                                <td class="numeric">
                                    0.14%
                                </td>
                                <td class="numeric">
                                    $3.70
                                </td>
                                <td class="numeric">
                                    $3.72
                                </td>
                                <td class="numeric">
                                    $3.68
                                </td>
                                <td class="numeric">
                                    191,373
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    ADU
                                </td>
                                <td>
                                    ADAMUS RESOURCES LIMITED
                                </td>
                                <td class="numeric">
                                    $0.72
                                </td>
                                <td class="numeric">
                                    0.00
                                </td>
                                <td class="numeric">
                                    0.00%
                                </td>
                                <td class="numeric">
                                    $0.73
                                </td>
                                <td class="numeric">
                                    $0.74
                                </td>
                                <td class="numeric">
                                    $0.72
                                </td>
                                <td class="numeric">
                                    8,602,291
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    AGG
                                </td>
                                <td>
                                    ANGLOGOLD ASHANTI LIMITED
                                </td>
                                <td class="numeric">
                                    $7.81
                                </td>
                                <td class="numeric">
                                    -0.22
                                </td>
                                <td class="numeric">
                                    -2.74%
                                </td>
                                <td class="numeric">
                                    $7.82
                                </td>
                                <td class="numeric">
                                    $7.82
                                </td>
                                <td class="numeric">
                                    $7.81
                                </td>
                                <td class="numeric">
                                    148
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    AGK
                                </td>
                                <td>
                                    AGL ENERGY LIMITED
                                </td>
                                <td class="numeric">
                                    $13.82
                                </td>
                                <td class="numeric">
                                    +0.02
                                </td>
                                <td class="numeric">
                                    0.14%
                                </td>
                                <td class="numeric">
                                    $13.83
                                </td>
                                <td class="numeric">
                                    $13.83
                                </td>
                                <td class="numeric">
                                    $13.67
                                </td>
                                <td class="numeric">
                                    846,403
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    AGO
                                </td>
                                <td>
                                    ATLAS IRON LIMITED
                                </td>
                                <td class="numeric">
                                    $3.17
                                </td>
                                <td class="numeric">
                                    -0.02
                                </td>
                                <td class="numeric">
                                    -0.47%
                                </td>
                                <td class="numeric">
                                    $3.11
                                </td>
                                <td class="numeric">
                                    $3.22
                                </td>
                                <td class="numeric">
                                    $3.10
                                </td>
                                <td class="numeric">
                                    5,416,303
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>